<template>
	<div class="dsfdsww">

		<section id="content" class="dsfdssas">
			<div class="topBoxThree">
				<div class="gengduoImg"  style="opacity: 0;">
					<img src="../assets/img/gengduo.png" alt="">
				</div>
				<div class="logoImg">
					<img :src="this.$https.baseUrl + setting.site_logo" alt="">
					<!-- <img src="../assets/images/dylogo.png" alt=""> -->
				</div>
				<div class="xiazaiImg" @click="onClickRideswf()">
					<img src="../assets/img/xiazai.gif" alt="">
				</div>
			</div>

			<!-- 侧边栏 -->
			<van-popup v-model="showcell" position="left" :style="{width: '65%',height: '100%', background: '#222' }">
				<div class="dsfdsfbox">
					<div class="fanhuianniu" @click="showcell=false">
						<img src="../assets/img/jiantou.svg" alt="">
					</div>
					<div class="cellButBox">
						<div class="cellButBoxIt">
							{{$t('newCellList.title1')}}
						</div>
						<div class="cellButBoxIt">
							{{$t('newCellList.title2')}}
						</div>
					</div>
					<div class="shijianBox">
						<p>02/07/2024 01:43:41 (GMT-4)</p>
						<p>02/07/2024 12:43:41 (GMT+7)</p>
					</div>
				</div>
				<div class="cellListBox">
					<div class="cellListBoxIt">
						<img src="../assets/img/4.png" alt="">
						<p>{{$t('newCellList.title3')}}</p>
					</div>
					<div class="cellListBoxIt">
						<img src="../assets/img/5.png" alt="">
						<p>{{$t('newCellList.title4')}}</p>
					</div>
					<div class="cellListBoxIt">
						<img src="../assets/img/5.png" alt="">
						<p>{{$t('newCellList.title5')}}</p>
					</div>
					<div class="cellListBoxIt">
						<img src="../assets/img/6.png" alt="">
						<p>{{$t('newCellList.title6')}}</p>
					</div>
					<div class="cellListBoxIt">
						<img src="../assets/img/7.png" alt="">
						<p>{{$t('newCellList.title7')}}</p>
					</div>
					<div class="cellListBoxIt">
						<img src="../assets/img/13.png" alt="">
						<p>{{$t('newCellList.title8')}}</p>
					</div>
					<div class="cellListBoxIt">
						<img src="../assets/img/8.png" alt="">
						<p>{{$t('newCellList.title9')}}</p>
					</div>
					<div class="cellListBoxIt">
						<img src="../assets/img/9.png" alt="">
						<p>{{$t('newCellList.title10')}}</p>
					</div>
					<div class="cellListBoxIt">
						<img src="../assets/img/10.png" alt="">
						<p>{{$t('newCellList.title11')}}</p>
					</div>
					<div class="cellListBoxIt">
						<img src="../assets/img/11.png" alt="">
						<p>{{$t('newCellList.title12')}}</p>
					</div>
					<div class="cellListBoxIt">
						<img src="../assets/img/12.png" alt="">
						<p>{{$t('newCellList.title13')}}</p>
					</div>
				</div>
			</van-popup>

		</section>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				showcell: false,
				setting: {},
			}
		},
		methods: {
			onClickRideswf() { ///右上下载app
				location.href = this.$store.state.config.app_link
			},
		},
		mounted() {
			this.$https.fetchPost('/m/config',{}).then((res) => {
				this.setting = res.data
			})
		}
	}
</script>

<style scoped lang="less">
	.dsfdsww {
		width: 100%;
		height: 50px;
		background-color: #222222;
	}

	.dsfdssas {
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 99;
		background-color: #222222;
	}

	.topBoxThree {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 5px 10px;
		box-sizing: border-box;

		.bar {
			.text-2xl {
				font-size: 1.5rem;
			}

			.fa-bars:before {
				content: "\f0c9";
			}
		}

		.gengduoImg {
			width: 21px;
			height: 24px;
			position: relative;
			top: -7px;

			img {
				width: 100%;
				height: 100%;
			}
		}

		.logoImg {
			width: 100px;
			height: 40px;

			img {
				width: 100%;
				height: 100%;
			}
		}

		.xiazaiImg {
			width: 35px;
			height: 35px;

			img {
				width: 100%;
				height: 100%;
			}
		}
	}

	.dsfdsfbox {
		width: 100%;
		background: #303030;
		padding: 10px 0px;
		box-sizing: border-box;

		.fanhuianniu {
			width: 100%;
			text-align: right;

			img {
				margin-right: 10px;
				margin-top: 10px;
			}
		}

		.cellButBox {
			width: 100%;
			padding: 10px 5px;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.cellButBoxIt {
				width: 49%;
				height: 20px;
				line-height: 20px;
				font-size: 13px;
				color: #fed700;
				border: 1px solid #fed700;
				border-radius: 5px;
				text-align: center;
			}
		}

		.shijianBox {
			width: 100%;
			margin: 0px 0px 0;

			p {
				font-size: 12px;
				color: #fff;
				margin: 5px 0px 0;
			}
		}
	}

	.cellListBox {
		width: 100%;

		.cellListBoxIt {
			width: 100%;
			padding: 10px;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #fff;

			img {
				width: 25px;
				height: 23px;
				margin-right: 10px;
			}

			p {
				font-size: 15px;
				color: #fff;
				text-align: left;
			}
		}
	}
</style>